import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {Editor} from 'react-draft-wysiwyg'
import {EditorState, convertToRaw, ContentState} from 'draft-js'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'


/*用来指定商品详情信息的富文本编程器组件*/
export default class RichTextEditor extends Component{
    static propTypes = {
        detail: PropTypes.string
    }
    constructor(props) {
        super(props);
        // 根据传入的 html 文本初始显示
        const detail = this.props.detail
        let editorState
        if(detail){
            // 如果传入才需要做处理
            const blocksFromHtml = htmlToDraft(detail)
            const { contentBlocks, entityMap } = blocksFromHtml
            const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap)
            editorState = EditorState.createWithContent(contentState)
        }else{
            editorState = EditorState.createEmpty()
        }
        // 初始化状态
        this.state = {
            editorState
        }
    }
    /*当输入改变时立即保存状态数据*/
    onEditorStateChange=(editorState)=>{
        this.setState({
            editorState,
        })
    }
    /*得到输入的富文本数据*/
    getDetail=()=>{
        return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
    }
    render() {
        const {editorState} = this.state

        return(
            <Editor
                editorState={editorState}
                editorStyle={{height: 250, border: '1px solid #000', padding: '0 30px'}}
                onEditorStateChange={this.onEditorStateChange}
            />
        )
    }
}